<template>
  <div class="articleList">
    <div
      class="load"
      style="
        width: 100%;
        height: 800px;
        display: flex;
        justify-content: center;
        align-items: center;
      "
      v-if="isLoad"
    >
      <Load />
    </div>
    <el-tabs
      v-model="activeName"
      class="demo-tabs"
      @tab-click="handleClick"
      v-else
    >
      <!-- 推荐 -->
      <el-tab-pane label="推荐" name="common">
        <ul class="list">
          <li
            v-for="item in articleData"
            :key="item.id"
            @click="toDetail(item.id)"
          >
            <div class="article-main">
              <div class="article-title">
                {{ item.title }}
              </div>
              <div class="abstract">
                {{ item.articleAbstract }}
              </div>
              <div class="entry-footer">
                <div class="wrapper">
                  <div class="author">
                    {{ item.nickName }}
                  </div>
                  <div class="view">
                    <el-icon style="margin-right: 5px; font-size: 15px"
                      ><View
                    /></el-icon>
                    {{ item.views }}
                  </div>
                  <div class="like">
                    <el-icon style="margin-right: 5px; font-size: 15px"
                      ><Star
                    /></el-icon>
                    0
                  </div>
                </div>
                <div class="article-tag">
                  <el-tag
                    style="margin: 0 0 0 5px"
                    v-for="(tag, index) in item.tagNames"
                    :key="index"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
              </div>
            </div>
            <el-image
              :src="item.articleUrl"
              v-if="item.articleUrl"
              class="img"
              fit="contain"
            ></el-image>
          </li>
        </ul>
      </el-tab-pane>
      <!-- 最新 -->
      <!-- <el-tab-pane label="最新" name="new">
        <ul class="list">
          <li v-for="item in 10" :key="item">
            <div class="article-main">
              <div class="article-title">
                基于Vue3+TS对Axios进行相对全面的封装
              </div>
              <div class="abstract">
                Axios + TS 弱鸡封装 实现功能 1.可以创建多个创建多
                1.可以创建多个创建 1.可以创建多个创建
                1.可以创建多个创建个互不干扰，完全独立的axios实例
              </div>
              <div class="entry-footer">
                <div class="wrapper">
                  <div class="author">Admin</div>
                  <div class="view">
                    <el-icon style="margin-right: 5px; font-size: 15px"
                      ><View
                    /></el-icon>
                    0
                  </div>
                  <div class="like">
                    <el-icon style="margin-right: 5px; font-size: 15px"
                      ><Star
                    /></el-icon>
                    0
                  </div>
                </div>
                <div class="article-tag">
                  <el-tag style="margin: 0 0 0 5px">vue</el-tag>
                </div>
              </div>
            </div>
            <img
              src="https://img.freepik.com/free-photo/html-system-website-concept_23-2150376744.jpg?w=1380&t=st=1704279932~exp=1704280532~hmac=f9db8ff00cdecda0853a3dd5165bc8512c450ade662cc5e0908663190040748e"
              alt=""
            />
          </li>
        </ul>
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import { reqQueryPage, reqAddView } from "@/api/article";
import { ElMessage } from "element-plus";
import Load from "@/components/Load.vue";
import { useRouter } from "vue-router";
import useUserStore from "@/store/modules/user.js";

const userStore = useUserStore();

const $router = useRouter();

// 是否加载
const isLoad = ref(true);

// 父组件传递的分类Id
const props = defineProps(["categoryId"]);

let activeName = ref("common");

// 查询文章的实体
const entity = ref({
  page: 1,
  pageSize: 20,
  status: 3, // 状态为已发布
  isDeleted: 0,
});

// 文章数据
const articleData = ref([]);

onMounted(() => {
  getArticleData();
});

// 监听分类Id是否变化
watch(props, ({ categoryId }) => {
  isLoad.value = true;
  if (Number(categoryId)) {
    // 分类搜索
    entity.value.categoryId = Number(categoryId);
  } else {
    // 综合搜索
    entity.value.categoryId = null;
  }
  getArticleData();
});

// 获取文章数据
const getArticleData = () => {
  reqQueryPage(entity.value).then((res) => {
    if (res.code == 200) {
      if (res.data.result.length > 0) {
        articleData.value = res.data.result;
      } else {
        ElMessage.info("该分类下暂无数据");
      }
    }
    isLoad.value = false;
  });
};

const handleClick = (tab, event) => {
  console.log(tab, event);
};

// 跳转至详情页
const toDetail = (id) => {
  $router.push({
    query: {
      id,
    },
    path: "/article-detail",
  });
  if (userStore.userName) {
    reqAddView(id);
  }
};
</script>

<style scoped lang="scss">
.articleList {
  width: 100%;
  background-color: #fff;
  min-height: calc(100vh - 55px);
  .demo-tabs {
    padding: 10px;
    .list {
      width: 100%;
      overflow: hidden;

      li {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #f1f0f0;
        cursor: pointer;
        transition: all 0.2s;

        .article-main {
          flex: 1 1 auto;

          .article-title {
            font-weight: 600;
            font-size: 16px;
            line-height: 24px;
            width: 100%;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }

          .abstract {
            margin-bottom: 4px;
            font-weight: 400;
            font-size: 13px;
            line-height: 22px;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            color: #8a919f;
          }

          .entry-footer {
            width: 100%;
            flex-wrap: wrap;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;

            .wrapper {
              display: flex;
              align-items: center;

              .author,
              .view,
              .like {
                margin-right: 24px;
                font-size: 13px;
                line-height: 20px;
                flex-shrink: 0;
                color: #8a919f;
                display: flex;
                align-items: center;
              }
              .author:hover {
                color: #1e80ff;
              }
              .like:hover {
                color: #1e80ff;
              }
            }
          }
        }

        .img {
          flex: 0 0 auto;
          width: 108px;
          height: 72px;
          margin-left: 24px;
          border-radius: 4px;
          border: 1px solid #fff;
        }
      }
      li:hover {
        background-color: #f1f1f165;
      }
    }
  }

  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
}
</style>